import Blockquote from "@/components/Blockquote";
import {
	ProDescriptions,
	ProForm,
	ProFormDatePicker,
	ProFormRadio,
	ProFormText,
	ProFormTextArea
} from "@ant-design/pro-components";
import { Typography, Input, Tooltip, Space, Flex, theme, Avatar, Row, Upload, Button, message, Col, Select } from "antd";
import React, { useEffect, useRef, useState } from "react";
import { Divider } from "antd";
import IconFont from "@/components/IconFont";
import { CloudUploadOutlined, MailOutlined, PhoneOutlined } from "@ant-design/icons";
import styles from "./style/baseInfo.module.less";
import ImgCrop from "antd-img-crop";
import useFetchUserInfo from "@/hooks/useFetchUserInfo";
import DictTag from "@/components/DictTag";
import { getDict } from "@/services/api/module/system/dict";
const { useToken } = theme;
export default function index() {
	const { token } = useToken();
	const { userInfo, isLoading } = useFetchUserInfo();
	const [messageApi, contextHolder] = message.useMessage();
	const [sexOptions, setSexOptions] = useState<any>([]);
	const actionRef = useRef();
	useEffect(() => {
		getDict("sys_user_sex").then(data => {
			setSexOptions(data);
		});
		// getDict("sys_normal_disable").then(data => {
		// 	setStatusOptions(data);
		// });
		// getDict("sys_builtin_password").then(data => {
		// 	setResetPasswordTypes(data);
		// });
		// getDict("sys_user_type").then(data => {
		// 	setUserTypeOptions(data);
		// });
	}, []);
	const changeAvatar = (value: any) => {
		console.log(userInfo);

		let data = new FormData();
		data.append("avatarfile", value);
		messageApi.open({
			type: "loading",
			content: "正在处理修改头像请稍等...",
			duration: 0
		});
		// profile
		// 	.avatar(data)
		// 	.then((res: any) => {
		// 		console.log(res);
		// 		messageApi.destroy();
		// 		message.success(res?.msg);
		// 		setAvatarUrl(res?.data?.imgUrl);
		// 	})
		// 	.catch(() => {
		// 		messageApi.destroy();
		// 	});
	};
	const options = [
		{
			value: "86",
			label: "+86"
		},
		{
			value: "110",
			label: "+110"
		}
	];
	return (
		<>
			{contextHolder}
			<div style={{ padding: "10px 0" }}>
				<Row gutter={2}>
					<Col span={5} style={{ display: "flex", alignContent: "center", justifyContent: "center" }}>
						<div className={styles.container}>
							<Avatar
								className={styles.avatar}
								size={{ xs: 30, sm: 40, md: 50, lg: 60, xl: 80, xxl: 100 }}
								src={userInfo?.user?.avatar}
							/>
							{/* <div className={styles.mask}></div> */}
							<ImgCrop showGrid showReset rotationSlider modalTitle="裁切图像" onModalOk={changeAvatar}>
								<Upload showUploadList={false}>
									<div className={styles.button} style={{ background: token.colorPrimary }}>
										<CloudUploadOutlined style={{ fontSize: "20px" }} />
									</div>
								</Upload>
							</ImgCrop>
						</div>
					</Col>
					<Col span={19}>
						<div>
							<ProDescriptions
								column={2}
								dataSource={userInfo?.user}
								emptyText={"空"}
								columns={[
									{
										title: "姓名",
										key: "realName",
										dataIndex: "realName"
									},
									{
										title: "账号",
										key: "userName",
										dataIndex: "userName"
									},
									{
										title: "别名",
										key: "nickName",
										dataIndex: "nickName"
									},
									{
										title: "性别",
										key: "sex",
										dataIndex: "sex",
										valueType: "select",
										valueEnum: sexOptions,
										render: (_, record) => {
											return <DictTag enums={sexOptions} value={record.sex} />;
										}
									},
									{
										title: "手机号",
										key: "phonenumber",
										dataIndex: "phonenumber"
									},
									{
										title: "邮箱",
										key: "email",
										dataIndex: "email"
									},
									{
										title: "出生年月",
										key: "birthday",
										dataIndex: "birthday",
										valueType: "date"
									},
									{
										title: "个性签名",
										key: "signature",
										dataIndex: "signature",
										valueType: "text"
									}
								]}
							/>
						</div>
					</Col>
				</Row>
				<Blockquote style={{ marginBottom: 30 }}>
					<Typography.Title level={5}>基本信息</Typography.Title>
				</Blockquote>
				<ProForm
					style={{ padding: "0 20px" }}
					// formRef={formRef}
					layout="vertical"
					// onFinish={handleFinish}
					initialValues={{
						...userInfo?.user
						// phone: userInfo?.phone.split('-'),
					}}
				>
					<ProForm.Group>
						<ProFormText
							width="md"
							name="userName"
							label="用户账号"
							rules={[
								{
									required: true,
									message: "请输入您的用户名!"
								}
							]}
						/>
						<ProFormText
							width="md"
							name="realName"
							label="真实姓名"
							rules={[
								{
									required: true,
									message: "请输入您的真实姓名!"
								}
							]}
						/>
					</ProForm.Group>

					<ProForm.Group>
						<ProFormText
							width="md"
							name="nickName"
							label="昵称"
							rules={[
								{
									required: true,
									message: "请输入您的昵称!"
								}
							]}
						/>
						<ProFormText
							width="md"
							name="email"
							label="邮箱"
							rules={[
								{
									required: true,
									message: "请输入您的邮箱!"
								}
							]}
						/>
					</ProForm.Group>

					<ProForm.Group>
						<ProFormText
							name="phonenumber"
							width="md"
							label="手机号码"
							fieldProps={{
								addonBefore: <Select defaultValue="86" options={options} />
							}}
							required
							placeholder="请输入手机号码"
							rules={[
								{
									required: false,
									message: "请输入的手机号",
									pattern: /^\d{1,}$/
								},
								({ getFieldValue }) => ({
									validator(_, value) {
										if (value === "" || value === undefined) {
											const email = getFieldValue("email");
											if (email !== "" && email !== undefined) {
												return Promise.resolve();
											}
											return Promise.reject(new Error("手机号或邮箱二选一"));
										} else {
											return Promise.resolve();
										}
									}
								})
							]}
						/>
						<ProFormDatePicker name="birthday" width="md" label="出生年月" />
					</ProForm.Group>
					<ProFormRadio.Group
						radioType="button"
						name="sex"
						initialValue="0"
						label="性别"
						options={[
							{
								label: "男",
								value: "0"
							},
							{
								label: "女",
								value: "1"
							}
						]}
					/>
					<ProFormTextArea
						fieldProps={{
							size: "small"
						}}
						name="signature"
						width="xl"
						label="个人简介"
						rules={[
							{
								required: true,
								message: "请输入个人简介!"
							}
						]}
						placeholder="个人简介"
					/>
				</ProForm>
			</div>
		</>
	);
}
